@extends('app')
@section('title', '用户管理')
@section('content')
    <div style="margin-bottom: 10px;display: inline-block;width: 100%">
        <el-button @click="addUserVisible = true;" type="primary" style="float: left;">添加用户</el-button>
        <el-button @click="logout" type="info" style="float: right;">退出</el-button>
    </div>
    <el-table
        :data="userList"
        border
        style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="Id"
            width="100">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称">
        </el-table-column>
        <el-table-column
            prop="created_at"
            label="添加时间"
            width="200">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
                <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
                <el-button @click="editUser(scope.row)" type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        style="margin-top: 10px;float: right;"
        background
        @current-change="selectCurrentPage"
        :hide-on-single-page="true"
        layout="total, prev, pager, next, jumper"
        :page-size="10"
        :pager-count="5"
        :current-page.sync="currentPage"
        :total="total">
    </el-pagination>

    <el-dialog :title="editUserTitle" :visible.sync="editUserVisible">
        <el-form :model="editUserForm">
            <el-form-item label="名称" label-width="80px">
                <el-input v-model="editUserForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="80px">
                <el-input type="password" v-model="editUserForm.password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editUserVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEditUser">保 存</el-button>
        </div>
    </el-dialog>

    <el-dialog title="添加用户" :visible.sync="addUserVisible">
        <el-form :model="addUserForm">
            <el-form-item label="名称" label-width="80px">
                <el-input v-model="addUserForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" label-width="80px">
                <el-input type="username" v-model="addUserForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="80px">
                <el-input type="password" v-model="addUserForm.password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addUserVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
        </div>
    </el-dialog>
@endsection

@section('script')
    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    editUserTitle  : '编辑用户',
                    editUserVisible: false,
                    addUserVisible : false,
                    userList       : [],
                    activeIndex    : "user",
                    showMenu       : true,
                    total          : 0,
                    currentPage    : 0,
                    editUserForm   : {
                        id      : 0,
                        name    : '',
                        password: ''
                    },
                    addUserForm: {
                        username: '',
                        password: '',
                        name    : ''
                    }
                }
            },
            mounted(){
              this.getUserList(1)
            },
            methods:{
                selectCurrentPage(page){
                    this.getUserList(page)
                },
                async getUserList(page){
                    const { data } =  await request.post('{{ MODULE_URL }}/user/list',{ page })
                    this.userList = data.data
                    this.total = data.total
                },
                editUser(row){
                    this.editUserForm.id = row.id
                    this.editUserForm.name = row.name
                    this.editUserTitle = '编辑用户' + row.name + "(ID:" + row.id + ")"
                    this.editUserVisible = true
                },
                saveEditUser(){
                    request.post('{{ MODULE_URL }}/user/save',this.editUserForm).then(res => {
                        this.$message.success(res.message)
                        this.editUserVisible = false
                        this.getUserList(this.currentPage)
                    })
                },
                deleteUser(row){
                    this.$confirm('是否确定删除用户【'+row.name+'】?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.post('{{ MODULE_URL }}/user/delete',{ id: row.id}).then(res => {
                            this.$message.success(res.message)
                            this.currentPage = 1
                            this.getUserList(this.currentPage)
                        }).catch(() => {})
                    }).catch(() => {});
                },
                addUser(){
                    request.post('{{ MODULE_URL }}/user/add',this.addUserForm).then(res => {
                        this.$message.success(res.message)
                        this.addUserVisible = false
                        this.addUserForm = {
                            username: '',
                            password: '',
                            name    : ''
                        }
                        this.currentPage = 1
                        this.getUserList(this.currentPage)
                    }).catch(() => {})
                },
                logout(){
                    this.$confirm('是否确定退出登录？', '提示',{
                        center: true
                    }).then(() => {
                        request.post('{{ MODULE_URL }}/user/logout').then(res => {
                            this.$message.success(res.message)
                            document.cookie = ''
                            location.href = '{{ MODULE_URL }}/'
                        }).catch(() => {})
                    }).catch(() => {});
                }
            }
        })
    </script>
@endsection
